<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>box-shadow</title>
	<style type="text/css">
		.demo {
			max-width: 200px;
			height: 100px;
			margin: 50px 20px;
			background: yellowgreen;
			border-radius: 5px;
		}

		.effect-1 {
			border: 10px solid yellowgreen;
			outline: 1px dashed #fff;
			outline-offset: -5px;

		}

		.effect-2 {
			border: 10px solid yellowgreen;
			outline: 1px dashed #fff;
			box-shadow: 0 0 0 5px yellowgreen;
		}

		.demo2 {
			max-width: 200px;
			height: 100px;
			padding: 1em;
			margin: 50px 20px;
		}
		.effect-3 {
			background: #655
		}
		.effect-3 > div {
			height: 100%;
			padding: 1em;
			border-radius: 1em;
			background: tan;
			overflow: hidden;
			box-sizing: border-box;
		}
		.effect-4 {
			background: tan;
			border-radius: 1em;
			box-shadow: 0 0 0 .5em #655;
			overflow: hidden;
			outline: 1em solid #655;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<p>通过 outline-offset 来控制虚线位置</p>
	<div class="demo effect-1"></div>

	<p>通过投影来实现 box-shadow</p>
	<div class="demo effect-2"></div>

	<p>通过使用2个div</p>
	<div class="demo2 effect-3">
		<div></div>
	</div>

	<p>通过 box-shadow 与 outline</p>
	<div class="demo2 effect-4"></div>

</body>
</html>